<template>
  <div>
    <div class="Warning_cont">
      <div class="Warning_top">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 5px">
            <div class="table_serch_labe_title">CODE编码</div>
            <el-form-item label="">
              <el-select
                v-model="formInline.code"
                clearable
                size="mini"
                style="margin-left: 5px; margin-top: 0px; width: 140px"
                placeholder="请选择内容"
              >
                <el-option
                  v-for="(item, index) in this.codelist"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">设备编码</div>
            <el-form-item label="">
              <el-select
                v-model="formInline.step"
                clearable
                size="mini"
                style="margin-left: 5px; margin-top: 0px; width: 140px"
                placeholder="请选择内容"
              >
                <el-option
                  :label="item.STEP_ID"
                  :value="item.STEP_ID"
                  v-for="(item, index) in this.sitelist"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">起始日期</div>
            <el-form-item label="">
             <StartTime :formInline="formInline"></StartTime>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">结束日期</div>
            <el-form-item label="">
               <Endtime  :formInline="formInline"></Endtime>
            </el-form-item>
          </div>

          <div class="table_serch_labe">
            <el-button
              type="primary"
              size="mini"
              @click="Warmingclick"
              style="height: 30px; margin-top: 5px; margin-right: 5px"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>

      <div class="Warning_table">
        <!-- <el-table
          :data="tabledata"
          border
          :row-style="{ height: '5px' }"
          :header-cell-style="thStyleFun"
          :cell-style="cellStyleFun"
          style="width: 100%; font-size: 10px"
        > 
         <el-table-column type="index" :index="indexMethod"></el-table-column>
          <el-table-column prop="CODE" label="CODE"></el-table-column>
          <el-table-column prop="TIME" label="TIME" width="200"></el-table-column>
          <el-table-column prop="DATA" label="DATA"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="LINE_ID" label="LINE_ID"> </el-table-column>
          <el-table-column prop="STEP_ID" label="STEP_ID"> </el-table-column>
          <el-table-column prop="EQP_ID" label="EQP_ID"> </el-table-column>
          <el-table-column prop="ID" label="ID"> </el-table-column>
          <el-table-column prop="UNIT_ID" label="UNIT_ID"> </el-table-column>
          <el-table-column prop="FIXTURE_ID" label="FIXTURE_ID"></el-table-column>
        </el-table> -->
       
       
        <table class="table table-hover" >
          <thead>
            <tr>
              <th>#</th>
              <th scope="col">CODE</th>
              <th scope="col">DATA</th>
              <th scope="col">TIME</th>
              <th scope="col">LINE_ID</th>
              <th scope="col">STEP_ID</th>
              <th scope="col">EOP_ID</th>
              <th scope="col">UNIT_ID</th>
            </tr>
          </thead>
          <tbody>
               <tr v-for="(item,index) in this.tabledata" :key="index">
                     <th>{{index++}}</th>
                     <td>{{item.CODE}}</td>
                     <td>{{item.DATA}}</td>
                     <td>{{item.TIME}}</td>
                     <td>{{item.LINE_ID}}</td>
                     <td>{{item.STEP_ID}}</td>
                     <td>{{item.EOP_ID}}</td>
                     <td>{{item.UNIT_ID}}</td>
               </tr>
          </tbody>
        </table>
          <div class="tlop">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
      </div>

    </div>
  </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import Endtime from '../../../components/endTime/Endtime'
import StartTime from '../../../components/StarTime/StartTime'
export default {
  components:{
    Endtime,
    StartTime
  },
  data() {
    return {
      formInline: {
        code: "",
        step: "",
        starttime: "",
        endtime: "",
      },
      total: 0,
      currentPage: 1,
      pageSize: 10,
      codelist: [],
      sitelist: [],
      Uid: "",
      tabledata: [],
      Countnum: "",
    };
  },
  mounted() {
    this.getManlist();
  },
  methods: {
    getManlist(){
      this.ajax
        .all([
          this.ajax.get("func/1023/selAlarmCode").then((res) => res.data),
          this.ajax.get("func/1023/selProductList").then((res) => res.data),
        ])
        .then(
          this.ajax.spread((val1, val2) => {
            val1.forEach((ele) => {
              this.codelist.push(ele.CODE);
            });
            this.sitelist = val2.step;
          })
        );
    },
  
    indexMethod(index) {
        return index * 1;
      },

    thStyleFun() {
      return "text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },

    Warmingclick() {
      if(this.formInline.starttime == ""){
           this.$alert("起始日期不能为空", "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
      }else if(this.formInline.endtime ==""){
           this.$alert("结束日期不能为空", "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
      }else{
        let json = JSON.stringify(this.formInline);
        this.ajax.get(`func/1023/selAlarmRecord?params=${json}`).then((res) => {
          if (res.status == 200) {
            this.total = res.data.num;
            this.Uid = res.data.uuid;
            this.WarmingPage();
          }
        });
      }
    },

    WarmingPage() {
      var url = `rtable/rk?page=${this.currentPage}&cpp=${this.pageSize}`;
      var besurl = url.replace("rk", this.Uid);
      this.ajax({
        url: besurl,
        method: "GET",
      }).then((res) => {
        console.log(res.data)
        this.tabledata = res.data;
      });
    },

    loadAll() {
      // return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
       this.pageSize = val;
       this.WarmingPage();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.WarmingPage(); 
    },
  },
};
</script>

<style  scoped>
.Warning_cont {
  width: 100%;
}

.Warning_top {
  width: 100%;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px gainsboro;
}
.Warning_table {
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
  /* border: 1px solid #000; */
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px gainsboro;
}
.table_serch {
  display: flex;
  justify-content: space-between;
}
.table_serch_labe {
  /* border:1px solid #000; */
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
</style>